<template>
	<div>
		<van-form>
			<van-field v-model="username" name="账号" label="账号" placeholder="账号"
				:rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="password" type="password" name="密码" label="密码" right-icon="warning-o" placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]" />
			<van-field v-model="tel" type="tel" label="手机号" :rules="[{ required: true, message: '请填写手机号' }]" />
			<van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码"
				:rules="[{ required: true, message: '请填写验证码' }]">
				<template #button>
					<van-button size="small" type="primary">发送验证码</van-button>
				</template>
			</van-field>
			<div style="margin: 16px;">
				<van-button color='#F688A4' round block type="info" @click='onSubmit()'>注册</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
	import {
		Form,
		Field,
		Toast
	} from 'vant';
	import API from '../utils/API.js'
	export default {
		data() {
			return {
				username: '',
				password: '',
				tel: '',
				sms: '',
				errmsg: ''
			};
		},
		components: {
			[Form.name]: Form,
			[Field.name]: Field,
		},
		methods: {

			onSubmit() { //注册
				if (!this.username == '' && !this.password == '' && !this.tel == '' && !this.sms == '') {
					let use = { //获取用户输入数据 封装给后端
						username: this.username,
						password: this.password,
						mobile: this.tel,
						code: this.sms,
					};
					this.$post(API.POST_AUTH_REGISTER, use)
						.then(res => {
							if (res.data.errmsg == "成功") {
								Toast("成功注册");
								this.$router.push({
									path: "/member"
								})
								console.log(res.data.errmsg)
							} else {
								Toast(res.data.errmsg);
								// console.log(res)
							}
						})
				} else {
					Toast('信息没填完');
				}
			},
		},
	};
</script>

<style>
	.felx {
		display: flex;
		justify-content: space-between;
		width: 96%;
		font-size: 18px;
		margin: 10px;

	}
</style>
